Blog Update 2025

My first foray into using NextJS with MDX as the backbone of my blog consisted of two pages a Home page which listed all the blog entries and a blog entry page that consisted of the actual blog entry. The new blog now is more fleshed out with separate pages for the following:

• Home: Landing page for the site
• Blog Entry List: List and eventually search for blog posts
• Blog Entry: View blog entries
• About: To sum up the reason for the whole site.
• About Author: Separate page each author of the blog to write about themselves.

This update upgraded the tech stack as well:

• NextJS 16 (latest as of October 2025)
• TailwindCSS: Is now being used for styling
• MDXRemote: To display MDX components in NextJS
• Rehype Highlight: For syntax highlighting of code.

Before and After Pictures

Home Page Changes

The new blog template I'm using has a simpler home page with just the name of my site now on the home page.

Blog Entry Changes

The new entry page now includes syntax highlighting and each entry no longer includes my profile pic on the top now instead going straight to the post.

Notes

This is just a collection of useful links and notes I took while upgrading my site.

• What is front matter?: Useful article for understanding what exactly is front matter.
• Gray Matter: NPM Lib for extracting front matter
• Syntax Highlighting: Article that made things click for how to use MDXRemote and get syntax highlighting.
• How Next.Js Processes MDX
• Vercel Portfolio Starter Kit: Ripped my styling from here and this was also great for learning how I should be putting the pieces together.
• New To Me HTML Elements:
  • aside: frequently used for sidebars or call-out boxes.
  • section
  • main: The main content area consists of content that is directly related to or expands upon the central topic
  • article

Whats Next?

Well start actually creating blog entries of course.

From a technical feature perspective though the next features I'd like to add are:

• Finish adding any other useful features from example template
• Add link from author on article to About/{author} page.
• Add minutes to read information on articles
• Add copy button to code blocks
• Properly host site on AWS/Vercel instead of forwarding to Vercel link.
• Ensure MDX is behaving appropriately when for all html elements. For example ## and ### are currently the same size and bold doesn't work natively for some reason.
• Use different Icon(one from Isaac) for site instead of nextjs icon.
• Add linting and possibly tests to tighten up build process.